"use strict";  //如果浏览器支持的话，则开启ECMAScript 5的严格模式
/**
 * 这里的脚本定义了calculate()函数，在HTML代码中绑定事件处理程序时会调用它；
 * 这个函数从<input>元素中读取数据，计算贷款赔付信息，并将结果显示在<span>元素中；
 * 同样，这里还保存了用户数据，展示了放贷人链接并绘制出了图标
 */
function calculate() {
    // 查找文档中用于输入输出的元素
    var amount = document.getElementById("amount");
    var apr = document.getElementById("apr");
    var years = document.getElementById("years");
    var zipcode = document.getElementById("zipcode");
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");
    // 假设所有的输入都是合法的，将从input元素中获取输入数据
    // 将百分比格式转化为小数格式，并从年利率转化为月利率
    // 将年度赔付转化为月度赔付
    var principal = parseFloat(amount.value);
    var interest = parseFloat(apr.value);
    var payments = parseFloat(years.value);

    // 现在开始计算月度赔付的数据
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal * x * interest) / (x - 1);
    // 如果结果没有超过javascript能表示的数字返回，且用户的输入也正确
    // 这里所展示的结果就是合法的
    if (isFinite(monthly)) {
        // 将数据填充到输出字段的位置。四舍五入到小数点后两位数字
        payment.innerHTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);

        // 将用户的输入数据保存下来，这样下次访问时也能取到数据
        save(amount.value, apr.value, years.value, zipcode.value);
        //  找到并展示本地放贷人，但忽略网络错误
        try {
            // 捕获这段代码抛出的所有异常
        } catch (e) {
            // 忽略这些异常
            getLenders(amount.value, apr.value, years.value, zipcode.value)
        }
    } else {
        // 计算结果不是数字或者是无穷大，意味着输入的数据是非法或不完整的
        // 清空之前的输出数据
        payment.innerHTML = "";
        total.innerHTML = "";
        totalinterest.innerHTML = "";
        // 个人理解：每一个参数传空的
        chart();
    }

}

// 将用户的输入保存至localStorage对象的属性中
// 这些属性在再次访问时还会继续保持在原位置
// 如果你在浏览器中按照file://URL的方式直接打开本地文件，
// 则无法在某些浏览器中使用存储功能，（比如FireFox）
// 而通过HTTP打开文件是可行的
function save(amount, apr, years, zipcode) {
    // 只有浏览器支持的时候才运行这里的代码
    if (window.localStorage) {
        localStorage.loan_amount = amount;
        localStorage.loan_apr = apr;
        localStorage.loan_years = years;
        localStorage.loan_zipcode = zipcode;
    }
}

// 在文档首次加载时，将会尝试还原输入字段
window.onload = function () {
    // 如果浏览器支持本地存储并且上次保存的值是存在的
    if (window.localStorage && localStorage.loan_amount) {
        document.getElementById("amount").value = localStorage.loan_amount;
        document.getElementById("apr").value = localStorage.loan_apr;
        document.getElementById("years").value = localStorage.loan_years;
        document.getElementById("zipcode").value = localStorage.loan_zipcode;
    }

};

function getLenders(amount, apr, years, zipcode) {
    // 如果浏览器不支持XMLHttpRequest对象，则退出
    if (!window.XMLHttpRequest) {
        return;
    }
    // 找到要显示放贷人列表的元素
    var ad = document.getElementById("lenders");
    if (!ad) {
        // 如果返回为空，则退出
        return;
    }
    // 将用户输入的数据进行URL编码，并作为查询参数附加在URL里
    var url = "getLenders.php" + "?amt=" + encodeURIComponent(amount) +
        "&apr=" + encodeURIComponent(apr) +
        "&years=" + encodeURIComponent(years) +
        "&zipcode=" + encodeURIComponent(zipcode);
    // 通过XMLHttpRequest对象来提取返回数据
    var req = new XMLHttpRequest();   // 发起一个新的请求
    req.open("GET", url);             // 通过URL发起一个HTTP GET请求
    req.send(null);                   // 不带任何正文发送这个请求
    // 在返回数据之前，注册了一个事件处理函数，这个处理函数
    // 将会在服务器的相应返回至客户端的时候调用
    // 这种异步编程模型在客户端javaScript中是非常常见的
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // 如果代码运行到这里，说明我们得到了一个合法且完整的HTTP响应
            var response = req.responseText;  // HTTP响应是以字符串的形式呈现的
            // 将其解析为JS数组
            var lenders = JSON.parse(response);
            // 将数组中的放贷人对象转换为HTML字符串形式
            var list = "";
            for (var i = 0; i < lenders.length; i++) {
                list += "<li><a href='" + lenders[i].url + "'>" + lenders[i].name + "</a>"
            }
            // 将数据在HTML元素中呈现出来
            ad.innerHTML = "<ul>" + list + "</ul>";
        }
    }
}

function chart(principal, interest, monthly, payments) {

}